<template>
  <div class="bgM">
    <van-row>
      <van-col span="24">
        <div class="user-info-card">
          <div class="profile-card sc-div-ios-h sc-div-ios-s ios hydrated">
            <!---->
            <div
              class="profile-card-content ios card-content-ios hydrated"
              style="    padding: 24px 0 23px 4px;height: -webkit-fill-available;"
            >
              <div
                class="user-info item ios item-lines-none ion-focusable hydrated new-user-info"
                lines="none"
              >
                <div
                  class="user-avatar item ios item-lines-none ion-focusable hydrated"
                  lines="none"
                >
                  <van-image class="avatar ios hydrated" lazy-load round :src="user.picPath" />
                </div>
                <div
                  class="user-info-detail item-label item ios item-lines-none ion-focusable hydrated"
                  lines="none"
                >
                  <div>
                    <label
                      class="user-name sc-label-ios-h sc-label-ios-s ios hydrated"
                    >{{user.userName}}</label>
                    <label
                      class="user-dept sc-label-ios-h sc-label-ios-s ios hydrated"
                    >{{user.identityText}}</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-cell title="个人假期汇总" is-link to="wdjq" />
          <!-- <van-cell title="个人请休假汇总" value="2" /> -->
          <van-cell title="个人信息" is-link to="wdxx"/>
        </van-cell-group>
      </van-col>
    </van-row>
    <van-row class="mt20">
      <van-col span="24">
        <van-cell-group>
          <van-cell title="我的加班" is-link to="wdjb"/>
          <van-cell title="我的请休假" is-link to="wdqxj"/>
          <van-cell title="我的报备" is-link to="wdbb"/>
          <!-- <van-cell title="我的加班代理记录" is-link to="sqkqy"/> -->
          <van-cell title="我的请休假代理记录" is-link to="wddsq"/>
          <van-cell title="我的出国境代理记录" is-link to="cgjwddsq"/>
          <van-cell title="授权考勤员" is-link to="sqkqy"/>
          <!-- <van-cell title="设置" /> -->
          <van-cell title="退出登陆" @click="handlelogout" />
        </van-cell-group>
      </van-col>
    </van-row>

    <!-- <van-card>
      <template #tags>
        <div>
          <van-cell title="个人假期汇总" is-link value="1" />
          <van-cell title="个人请休假汇总" is-link value="1" />
          <van-cell title="个人信息" is-link to="wdxx" />
        </div>
      </template>
    </van-card>-->

    <!-- <van-card>
      <template #tags>
        <div>
          <van-cell title="授权考勤员" is-link value="1" />
          <van-cell title="设置" is-link value="1" />
          <van-cell title="退出登陆" @click="handlelogout" />
        </div>
      </template>
    </van-card>-->

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/bl">办理</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/indexxj">新建</van-tabbar-item>
      <!-- <van-tabbar-item icon="setting-o">统计</van-tabbar-item> -->
      <van-tabbar-item icon="manager-o" to="/wode">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import Cookies from "js-cookie";
import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  data() {
    return {
      active: "",
      userId: "",
      userName: "",
      organizationName: "",
      workYear: "",
      user: {}
    };
  },
  created() {
    this.active = 4;
    this.userId = Cookies.get("userId");
    this.userName = Cookies.get("userName");
    this.workYear = "工龄" + Cookies.get("workYear") + "年";
    this.organizationName = Cookies.get("organizationName");
    this.user = this.$store.state.user;
    // this.user.picPath = window.sessionStorage.getItem('baseURL')+this.user.picPath
    console.log(this.user);
  },
  methods: {
    tiaozhuan(type) {
      this.$router.push({
        path: "/" + type
      });
    },
    handlelogout() {
      //登录成功后将token存储在cookie之中
      Cookies.set("Token", "", -1);
      //跳转
      this.$router.push(`/login`);
    }
  }
};
</script>

<style scoped>
.aaaF .van-cell:not(:last-child)::after {
  border-bottom: none !important;
  padding-left: 20px !important;
}
.cardMain {
  margin: 23px;
  background-color: #4293f4;
  border-radius: 10px;
  height: 140px;
}
.cardMain .van-card__thumb {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 60px;
  height: 60px;
  margin-top: 30px;
  margin-right: 8px;
  margin-left: 10px;
}
.user-info-card {
  padding: 20px;
  background-color: #fff;
}
.profile-card {
  height: 141px;
  margin: 0;
  background-color: #0083fd !important;
  background-image: url("http://v10.e-office.cn/eoffice10/client/mobile/assets/images/modules/home/profile/mg-card-bg.png") !important;
  background-repeat: no-repeat;
  background-size: 100%;
}

.sc-div-ios-h {
  --background: var(--div-background, transparent);
  --color: var(--ion-color-step-600, #666);
  border-radius: 8px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.72, 0.29, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.72, 0.29, 1);
  transition: transform 0.5s cubic-bezier(0.12, 0.72, 0.29, 1);
  transition: transform 0.5s cubic-bezier(0.12, 0.72, 0.29, 1),
    -webkit-transform 0.5s cubic-bezier(0.12, 0.72, 0.29, 1);
  font-size: 14px;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.sc-div-ios-h {
  --ion-safe-area-left: 0px;
  --ion-safe-area-right: 0px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  position: relative;
  background: var(--background);
  color: var(--color);
  font-family: var(--ion-font-family, inherit);
  overflow: hidden;
}
.profile-card-content {
  padding: 24px 0 23px 4px;
}

.card-content-ios {
  padding-left: unset;
  padding-right: unset;
  -webkit-padding-start: 20px;
  padding-inline-start: 20px;
  -webkit-padding-end: 20px;
  padding-inline-end: 20px;
}

.card-content-ios {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
  line-height: 1.4;
}

.hydrated {
  visibility: inherit;
}

.user-info {
  width: 100%;
  height: 94px;
  --background: transparent;
  --padding-start: 0;
  --inner-padding-end: 0;
}
.user-avatar {
  width: 94px;
  height: 94px;
  display: -webkit-box;
  display: flex;
  --background: transparent;
  --padding-start: 0;
  --inner-padding-end: 0;
}
.user-avatar .avatar {
  height: 64px;
  width: 64px;
  margin: auto;
}
.user-avatar .avatar img {
  background-color: #fff;
}

.sc-div-ios-s img {
  display: block;
  width: 100%;
}
img {
  max-width: 100%;
  border: 0;
}
.user-info-detail {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  line-height: 29px;
  padding-top: 16px;
  max-width: calc(100% - 94px);
  --background: transparent;
  --padding-start: 0;
  --inner-padding-end: 0;
  color: #fff;
}
.user-info-detail > div {
  width: 100%;
}
.user-name {
  margin-bottom: 6px;
  font-size: var(--emui-fs-1) !important;
  font-weight: 700;
}

.item.sc-label-ios-h,
.item .sc-label-ios-h {
  --color: initial;
  display: block;
  color: var(--color);
  font-family: var(--ion-font-family, inherit);
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.user-info-detail ion-note {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
user-info-detail .icon-qr-code-watch {
  font-size: 17px;
  opacity: 0.7;
}

.icon-qr-code-watch:before {
  content: "\e775";
}
.user-info-detail .emui-icon {
  margin-left: 5px;
  font-size: 24px;
  color: #fff;
}
.emui-icon {
  display: inline-block;
  font-family: emui !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.new-user-info {
  display: flex;
  justify-content: center;
  line-height: 32px;
  height: 85px;
}
</style>
